<template>
  <el-select
    v-model="defaultSelectTitle"
    placeholder="请选择直播"
    class="search-form-inline"
    default-first-option
    no-data-text="暂无数据"
    @change="selectChanged"
  >
    <el-option v-for="item in lives" :key="item.id" :label="item.title" :value="item.id" :disabled="item.disabled" />
    <el-button v-if="isGetAll == false" type="text" style="margin-left: 40%" @click="selectLoadMore">点击加载更多
    </el-button>

  </el-select>
</template>

<script>
import { liveList } from '@/api/lives'
import { string } from 'clipboard'

export default {
  name: 'HeaderSearch',
  directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        SELECTWRAP_DOM.addEventListener('scroll', function() {
          /**
          * scrollHeight 获取元素内容高度(只读)
          * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直	方向的滚动条, 那它的scrollTop的值默认为0.
          * clientHeight 读取元素的可见高度(只读)
          * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
          * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
          */
          const condition = this.scrollHeight - (this.scrollTop + 1) <= this.clientHeight
          if (condition) {
            binding.value()
          }
        })
      }
    }
  },
  props: {
    'defaultSelectTitle': string
  },
  data() {
    return {
      isGetAll: false,
      // 默认选择
      lives: [],
      keyword: ``,
      queryData: {
        start: 1, // 分页：页数
        length: 20, // 分页：数据条数
        order: `desc`
      }
    }
  },
  mounted() {
    liveList(this.queryData).then((resp) => {
      if (resp.code === 200) {
        if (resp.data.length > 0) {
          this.lives = resp.data
          var currentLive = resp.data[0]
          // this.defaultSelected = currentLive.title
          this.$store.dispatch('lives/setchoiceLive', currentLive)
        }
      }
    })
  },
  methods: {
    // 下拉列表触底加载更多
    selectLoadMore() {
      this.queryData.start += 1
      this.getSelectData()
    },
    fileMethods(val) {
      this.keyword = val
      this.lives = []
      this.queryData.start = 1
      this.getSelectData()
    },
    // 调用接口查找下拉列表中搜索字段
    getSelectData() {
      if (this.isGetAll) {
        return
      }
      if (this.keyword.length > 0) {
        this.queryData.keyword = this.keyword
      }
      liveList(this.queryData).then(res => {
        if (res.data.length === 0) {
          this.lives = this.lives.concat([{ 'title': '没有更多数据了', disabled: true }])
          this.isGetAll = true
          return
        }
        // 第1页直接展示
        if (res.count / this.queryData.length <= 1) {
          this.lives = res.data
          // 第2页则追加
        } else {
          this.lives = this.lives.concat(res.data)
        }
      })
    },
    // 失去下拉列表焦点时，将数据重置
    selectclear() {
      this.resetData()
      this.getSelectData()
    },
    // 下拉框变化时
    visibleChange(e) {
      if (e) {
        this.resetData()
        this.getSelectData()
      } else {
        this.resetData()
      }
    },
    // 选中项目变化时,更新vuex
    selectChanged(e) {
      for (var i = 0; i < this.lives.length; i++) {
        var l = this.lives[i]
        var id = l.id
        if (id === e) {
          this.$store.dispatch('lives/setchoiceLive', l)
        }
      }
    },
    // 清除时执行的函数
    resetData() {
      delete this.queryData.keyword
      this.lives = []
      this.keyword = ``
      this.isGetAll = false
      this.queryData.start = 1
    }
  }
}
</script>

<style lang="scss" scoped>
.search-form-inline {
  position: absolute;
  top: 50%;
  left: 374px;
  width: 398px;
  transform: translateY(-50%);
  ::v-deep .el-input__inner {
    font-size: 18px;
  }
}

.search-marginButton {
  // top: 16px;
  // left: 374px;
  width: 398px;
  height: 50px;
}

::v-deep .el-icon-arrow-up {
  margin-left: 10px;
  width: 36px;
  height: 36px;
  line-height: 36px !important;
}
</style>
